<template>

	<view style="background-color: #f9f9f9">

		<!-- 被访人表单信息 -->
		<u-form style="width: 100%;" :model="model" :rules="rules" ref="uForm" :error-type="errorType">

			<!-- 来访人信息标题 -->
			<view v-if="showFlag">
				<view class="prefer-title">来访人信息</view>
				<view class="prefer-content">

					<!-- 姓名 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</text>
							&nbsp;&nbsp;<span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="visitorName">
								<u-input v-model="model.visitorName" placeholder="输入姓名" />
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

					<!-- 电话 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</text><span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="visitorPhone">
								<u-input v-model="model.visitorPhone" placeholder="输入电话" />
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

					<!-- 开始日期 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>开始日期</text><span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="startTime">
								<view>
									<!-- v-model 布尔值变量，用于控制日历的弹出与收起-->
									<u-calendar v-model="startShow" :mode="mode" @change="startTimeChange" max-date="2099-12-31"></u-calendar>
									<u-input v-model="model.startTime" @click="startShow = true" class="choice" placeholder="请选择日期"></u-input>
								</view>
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

					<!-- 截止日期 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>截止日期</text><span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="endTime">
								<view>
									<!-- v-model 布尔值变量，用于控制日历的弹出与收起-->
									<u-calendar v-model="endShow" :mode="mode" @change="endTimeChange" max-date="2099-12-31"></u-calendar>
									<u-input v-model="model.endTime" @click="endShow = true" class="choice" placeholder="请选择日期"></u-input>
								</view>
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

					<!-- 到访人数 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>到访人数</text><span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="visitorQuantity">
								<u-number-box v-model="model.visitorQuantity" bg-color="#f0f0f0" :input-height="75" :input-width="120" :min="1"
								 @change="valChange"></u-number-box>
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

					<!-- 身份证号 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>身份证号</text><span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="idCard">
								<u-input v-model="model.idCard" placeholder="输入身份证号" />
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

				</view>
			</view>

			<view>
				<!-- 被访人信息标题 -->
				<view class="prefer-title">被访人信息</view>
				<view class="prefer-content">
					<!-- 电话 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</text>
							<span class="tip">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="ownerPhone">
								<u-input v-model="model.ownerPhone" placeholder="输入电话" @click="remove()" />
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

					<view class="pub-view msg" v-if="showPhone">
						<text class="warnMsg">该手机号尚未在物业处登记,请重新输入！</text>
					</view>

					<view class="pub-view msg" v-if="showStyle">
						<text class="warnMsg">该手机号格式有误,请重新输入！</text>
					</view>
					
					<view class="pub-view show" v-if="showAdress">
						<view class="pub-text adress">
							<view class="adressTittle">请选择访问地址</view>
							<view class="adressContent">
								<u-radio-group v-model="model.adress" @change="radioGroupChange">
									<u-radio shape="square" @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name":disabled="item.disabled">
										{{item.name}}
									</u-radio>
								</u-radio-group>	
							</view>
						</view>
					</view>

					<!-- 来访事由 -->
					<view class="pub-view">
						<view class="pub-text">
							<text>来访事由</text>
							<span style="color: red;">*</span>
						</view>
						<view class="pub-content col">
							<u-form-item prop="visitorRemark">
								<u-input v-model="model.visitorRemark" placeholder="输入事由" />
							</u-form-item>
							<image src="../../static/visitors/dayu.png" mode="widthFix" class="img">
						</view>
					</view>

				</view>
				
				<view class="submit">
					<u-button @click="submit()" class="button" type="primary">确认提交</u-button>
				</view>
				
			</view>

		</u-form>
	</view>
</template>

<script>
	// 解构console
	var { log } = console;
	
	import { visitorApplyUrl } from '../../api/request.js';
	import { checkIfOwnerUrl } from '../../api/request.js';
	import { openidSelectUrl } from '../../api/request.js';
	import { publicing } from '../../api/api.js';
	import {errdata} from '../../api/errdata.js';
	
	
	
	// 引入vuex的mapstate
	import { mapState } from 'vuex';

	export default {
		data() {
			return {
				
				list: [
					{
						name: '滁州金鹏集团总部大楼',
						disabled: false
					}
				],
				openData:'',
				openidSelectUrl:'',
				openid:'',
				// 表单提交的数据
				data: '',
				// 访客申请提交表单
				url:'',
				
				// 根据手机号检验是否为业主号码
				checkIfOwnerUrl:'',
				// 根据手机号检验是否为业主号码-提交数据
				checkData:'',
				// 校验结果标识
				checkFlag:true,
				// 结果标识
				resultFlag:false,
				

				// 来访人表单默认隐藏
				showFlag: false,
				// 手机号物业未登记 默认隐藏
				showPhone: false,
				// 手机号格式有误提示 默认隐藏
				showStyle: false,
				// 请选择访问地址 默认隐藏
				showAdress: false,
				// 开始日期默认隐藏
				startShow: false,
				// 截止日期默认隐藏
				endShow: false,
				// 选择日期的模式，date-为单个日期，range-为选择日期范围
				mode: 'date',


				// 表单内的数据
				model: {
					visitorName: '',
					visitorPhone: '',
					startTime: '',
					endTime: '',
					visitorQuantity: 1,
					idCard: '',
					ownerPhone: '',
					visitorRemark: '',
					adress:'滁州金鹏集团总部大楼'
				},

				// 表单校验规则
				rules: {
					// 访问人姓名
					visitorName: [{
						required: true,
						message: '请输入姓名'
					}],
					// 访问人号码
					visitorPhone: [{
							required: true,
							message: '请输入访问人手机号',
							trigger: ['change', 'blur'], // change：字段值发生变化时校验 blur：输入框失去焦点时触发
						},
						{
							validator: (rule, value, callback) => {
								if (!(/^1[3456789]\d{9}$/.test(value))) {
									return false;
								} else {
									return true;
								}
							},
							message: '来访人手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					// 开始时间
					startTime: [{
						required: true,
						message: '请选择开始时间'
					}],
					// 截止时间
					endTime: [{
						required: true,
						message: '请选择截止时间'
					}],
					// 到访人数
					visitorQuantity: [{
						required: true,
						message: '请选择到访人数'
					}],
					// 身份证号
					idCard: [{
						required: true,
						message: '请输入身份证号'
					},
					{
						validator: (rule, value, callback) => {
							if(this.$u.test.idCard(value)){
								return true
							}else{
								return false
							}
						},
						message: '身份证号格式有误',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['blur'],
					}
					],
					// 被访人号码
					ownerPhone: [{
							required: true,
							message: '请输入被访人手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (value.length == 11) {
									// Case1 手机格式有误
									if (!(/^1[3456789]\d{9}$/.test(value))) {
										this.showStyle = true
										return false;
									}else{
										return true;
									}
								} else {
									return false;
								}
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					],
					visitorRemark: [{
						required: true,
						message: '请输入事由'
					}]
				},

				// 错误提示类型
				errorType: ['toast'],
			}
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		onLoad() {},

		// 在input框每次输入内容的时候,这一行在后台都会打印值:改变后的数据---改变前的数据
		watch: {
			'model.ownerPhone': {
				handler: function(newVal, oldVal) {
					if (newVal.length == 11) {
						// Case1 校验手机号格式是否正确
						if (!(/^1[3456789]\d{9}$/.test(newVal))) {
							this.showStyle = true
							return false;
						}
						// Case2 todo 校验手机号是否在物业处登记
						else if (this.checkFlag) {
							this.checkIfOwnerUrl = checkIfOwnerUrl;
							this.checkData = {
								ownerPhone: newVal
							}
							// 校验手机号是否在物业处登记 
							publicing(this.checkIfOwnerUrl, this.checkData)
								.then(res => {
								log("res"+JSON.stringify(res))
								if (JSON.parse(JSON.parse(JSON.stringify(res.data)).data).StatusCode == 200 ) {
									log("success")
									this.showFlag = true;
									this.showPhone = false;
									this.showAdress = true;
								}else{
									log("fail")
									this.showPhone = true;
									this.resultFlag = true;
									return false;
								}
							})	
						}
						// Case3 手机号正确,展示访问人信息
						else {
							this.showFlag = true
							this.showAdress = true
							return true;
						}
					}else{
						this.showFlag = false;
					}
				},

			}
		},

		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},

			// 选择日期 选择日期确定触发
			startTimeChange(e) {
				this.model.startTime = e.result
			},

			// 选择日期 选择日期确定触发
			endTimeChange(e) {
				this.model.endTime = e.result
			},

			// 有效天数 步进器
			valChange(e) {
				this.model.visitorQuantity = e.value
			},

			// 移除被访人手机号提示错误
			remove() {
				this.showPhone = false;
				this.showStyle = false;
			},

			// 确认提交
			submit() {
				this.$refs.uForm.validate(valid => {
					// todo 自定义校验截止日期到大于开始日期

					if (valid) {
						this.data = {
							visitorName: this.model.visitorName, 
							visitorPhone: this.model.visitorPhone, 
							startTime: this.model.startTime, 
							endTime: this.model.endTime, 
							visitorQuantity: this.model.visitorQuantity, 
							idCard: this.model.idCard, 
							ownerPhone: this.model.ownerPhone,
							visitorRemark: this.model.visitorRemark
						}
						this.url = visitorApplyUrl
						log("传入表单的数据："+JSON.stringify(this.data))
						log("this.model.visitorPhone:"+this.model.visitorPhone)
						
						publicing(this.url, this.data)
							.then(res => {
								log(res);
								if (JSON.parse(JSON.parse(JSON.stringify(res.data)).data).StatusCode == 200) {
									
									// Step1 todo 加载框
									let errs = '提交成功'
									errdata.errlist(errs)
									
									// Step2 准备跳转审核记录页面参数
									let paramData = {
										visitorPhone:this.model.visitorPhone,
									};
									let paramDataStr = JSON.stringify(paramData);
									log(paramDataStr)
									
									// Step3 跳转审核记录页面
									setTimeout(() => {
										wx.navigateTo({
											url: 'visitorRecord?paramData=' + paramDataStr
										});
									}, 1500);
									
								} else {
									let errs = '提交失败'
									errdata.errlist(errs)
								}
							})
							.catch(err => {
								log(err);
							});
					}
					
					
					
				});
			}
		},
	
		computed: {
			...mapState(['openiddata']),
			getStr() {
				this.openid = this.openiddata.openid;
				// 根据openid获取手机号
				this.openData = {
					openId: this.openid 
				}
				this.openidSelectUrl = openidSelectUrl
				publicing(this.openidSelectUrl, this.openData)
					.then(res => {
						log("***res****:"+JSON.stringify(res))
						if(res.statusCode == 200){
							log("res.data.data："+res.data.data)
							this.model.visitorPhone = res.data.data
						}
					})
				
				
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;
	}

	.prefer-title {
		font-size: 35upx;
		font-weight: bold;
		margin: 0 0 30upx 30upx;
		letter-spacing: 3upx;
	}

	.prefer-content {
		background-color: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pub-view {
		height: 110upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #e6e6e6 solid;
		margin-left: 60upx;
	}

	.pub-content {
		width: 74%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.img {
		margin-right: 20upx;
		padding: 20upx;
		width: 40upx !important;
		height: 40upx !important;
	}

	.submit {
		height: 130upx;
		border-top: 1px solid #e6e6e6;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button {
		color: #ffffff;
		font-size: 33upx;
		letter-spacing: 5upx;
		width: 90%;
		border-radius: 20upx;
		text-align: center;
	}

	.tip {
		color: red;
		text-align: center;
	}

	.image {
		width: 130upx !important;
		height: 130upx !important;
		margin-right: 40upx;
	}

	.msg {
		text-align: center;
	}

	.warnMsg {
		text-align: center;
		color: red;
		display: inline-block;
	}
	.adress{
		padding: 10upx;
		height: 140upx;
	}
	
	.show{
		height: 150upx;
	}
	.adressTittle{
		margin-top: 15upx;
		height: 60upx;
		letter-spacing: 3upx;
	}
	.adressContent{
		height: 60upx;
	}
</style>
